<template>

    <div>
        <h5 style="font-size: 15px;color:#b3292c;margin-left: 10px;margin-bottom: 8px;">今日交易数据</h5>
        <a-table size="middle" :columns="columns" :dataSource="arr" :pagination="false"
            :rowKey="record => record.transOrderNo" :rowClassName='rowClassName'>
            <!-- <a slot="action" slot-scope="text" href="javascript:;">Delete</a> -->
            <!-- <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
              <span>交易单号：{{}}</span>
              <span>交易手续费：{{}}</span>
              <span>D0服务费：{{}}</span>
              {{record.description}}
            </div>-->
            <span slot="action" slot-scope="record">
                <span v-if="record.accountCommand=='recharge'">充值</span>
                <span v-if="record.transCode=='withdraw.api'">代付</span>
                <span v-if="record.transCode=='account.freeze'">冻结</span>
                <span v-if="record.transCode=='account.unfreeze'">解冻</span>
                <span v-if="record.accountCommand=='refund'">退款</span>
                <span v-if="record.transCode=='account.settle'">账户清算</span>
                <span v-if="record.transCode=='balance.pay'">消费</span>
                <span v-if="record.transCode=='balance.transfer'">转账</span>
                <span v-if="record.transCode=='withdraw'">提现</span>
            </span>
        </a-table>
    </div>

</template>

<script>
    const columns = [
        { align: 'center', title: "交易时间", dataIndex: "transDate" },
        { align: 'center', title: "交易单号", dataIndex: "transOrderNo" },
        { align: 'center', title: "业务类型", scopedSlots: { customRender: 'action' }, },
        { align: 'center', title: "收入金额（元）", dataIndex: "amountone" },
        { align: 'center', title: "支出金额（元）", dataIndex: "amounttwo" },//debit 0是收入(网上钱到账户)1是支出(账户的钱拿走了)
        { align: 'center', title: "账户余额（元）", dataIndex: "afterBalance" }
    ];
    export default {
        name: 'AccountingDetail',
        props: {
            AccountList: Array,
        },

        data() {
            return {
                columns,
                list: [],
                arr:[]
            }
        },
        created() {
            this.HandleList();
        },
        methods: {
            rowClassName(record, index) {
                let className = 'bg_white';
                if (index % 2 === 1) className = 'dark-row';
                return className;

            },
            // 处理列表数据
            HandleList() {
                this.list = this.AccountList
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].debit == false) {
                        this.arr.push({
                            key: i, transDate: this.list[i].transDate,
                            transOrderNo: this.list[i].transOrderNo,
                            transCode: this.list[i].transCode,
                            amountone: this.list[i].amount,
                            amounttwo: "---",
                            afterBalance: this.list[i].afterBalance,
                            accountCommand: this.list[i].accountCommand
                        });
                    } else {
                        this.arr.push({
                            key: i, transDate: this.list[i].transDate,
                            transOrderNo: this.list[i].transOrderNo,
                            transCode: this.list[i].transCode,
                            amountone: "---",
                            amounttwo: this.list[i].amount,
                            afterBalance: this.list[i].afterBalance,
                            accountCommand: this.list[i].accountCommand
                        });
                    }

                }
            }
        },

    }
</script>
<style lang="less" scoped>
    .ant-table-thead>tr>th {
        border-bottom: none;
    }

    .ant-table-wrapper {
        background: #fff !important;
    }

    .bg_white {
        background: #fff;
    }

    .dark-row {
        background: #f7f9fc;
    }

    .ant-table-tbody>tr>td {
        border: none;
    }
</style>